<template>
    <div class="tags">
        
        <el-tag
            v-for="(tag, index) in tags"
            :key="tag.name"
            :closable="!(tag.name === 'adminHome' || tag.name === 'userHome')"
            :effect="route.name === tag.name? 'dark' : 'plain'"
            @click="handleMenu(tag)"
            @close="handleClose(tag,index)"
            >
            {{ tag.label }}
        </el-tag>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { useAllDataStore } from '@/stores'
const store = useAllDataStore()
const tags = computed(() => store.state.tags )
const route = useRoute()
const router = useRouter()
const handleMenu = (tag)=>{
    router.push(tag.path)
    store.selectMenu(tag)
}

const handleClose = (tag,index)=>{
    store.updateTags(tag)
    //如果关的不是当前页面直接关闭
    if(tag.name !== route.name){ return}
    //是当前页面，判断是否是最后一个标签页，是则切换到前一个标签页，否，切换到后一个标签页
    if(index === store.state.tags.length){
        router.push(tags.value[index-1].path)
        store.selectMenu(tags.value[index-1])
    }else{
        router.push(tags.value[index].path)
        store.selectMenu(tags.value[index])
    }
}
</script>

<style lang ="less" scoped>
.tags{
    margin:15px 0 0 20px;
}
.el-tag{
    margin-right:10px;
}
</style>